
<template>
    <el-dialog
            :visible.sync="visible"
            title="地图导入"
            :close-on-click-modal="false"
            customClass="customWidth import"
            :close-on-press-escape="false"
            width="40%"
    >
        <div class="islation">
            <div>
                <img
                        src="~@/assets/img/import.png"
                        alt=""
                        style="height: 140px;"
                />
            </div>
            <div class="import">
                <span style="font-size: 16px">地图导入字段有:</span>
                <p style="margin-top: 10px; line-height: 20px">
                    名称,经度,纬度,类型,大小,备注,详情介绍,封面图,详情图片
                </p>
                <div class="btn">
          <span style="margin-right: 15px">
            <el-button type="primary" @click="downLoadExlce()"
            >下载导入模板</el-button
            >
          </span>
                    <span>
            <el-upload
                    :action="uploadUrl"
                    :on-progress="progress"
                    :on-success="importStaff"
                    :limit="3"
                    :file-list="fileList"
                    :show-file-list="false"
                    accept=".xlsx, .xls"
                    with-credentials
            >
              <el-button type="primary" class="text" style="vertical-align: top;"> 导入 </el-button>
              <el-progress
                      v-if="videoFlag == true"
                      type="circle"
                      :percentage="videoUploadPercent"
                      style="margin-top: 30px"
              ></el-progress>
            </el-upload>
          </span>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
    //入馆预约 booktickets
    import Cookies from "js-cookie";
    export default {
        data() {
            return {
                videoFlag: false,
                videoUploadPercent: "",
                visible: false,
                uploadUrl: "",
                fileList: [],
            };
        },
        methods: {
            init() {
                this.uploadUrl = `${
                    window.SITE_CONFIG["apiURL"]
                    }/sys/ismap/import?access_token=${Cookies.get("access_token")}`;
                this.visible = true;
            },
            // 上传文件的钩子
            progress(event, file, fileList) {
                this.videoFlag = true;
                this.videoUploadPercent = parseInt(file.percentage.toFixed(0));
                if (event.isTrusted === true) {
                } else {
                    this.$message({
                        message: "上传失败,请重新上传!",
                        type: "error",
                        offset: 100,
                        customClass: "message-index",
                    });
                }
            },
            // 下载模板
            downLoadExlce() {
                window.location.href = `${
                    window.SITE_CONFIG["apiURL"]
                    }/sys/ismap/download?access_token=${Cookies.get("access_token")}`;
            },
            // 导入成功
            importStaff(response, file, fileList) {
                this.videoFlag = false;
                this.videoUploadPercent = 0;
                this.$alert(response.msg, "提示", {
                    confirmButtonText: "确定",
                });
                // 清空上传列表
                this.fileList = [];
                this.visible = false;
                this.$emit("refreshDataList");
            },
        },
    };
</script>
<style lang="scss"scoped >
    .customWidth.import {
        width: 35%;
    }
    .islation {
        display: flex;
        justify-content: flex-start;
        height: 100%;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 20px;
        .import {
            margin-left: 50px;
        }
        .btn {
            display: flex;
            margin-top: 50px;
        }
    }
</style>
